<template>
  <div class="wrap">
    <div class="top">
      <img src="../public/img/编组.png" alt="" />
      <img src="../public/img/编组 (1).png" alt="" />
      <img src="../public/img/形状结合.png" alt="" />
    </div>

    <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
      <van-swipe-item v-for="(item,index) in bannerList" :key="index">
        <img :src="item.url" alt="" />
      </van-swipe-item>
    </van-swipe>

    <div class="center">
      <div class="center-txt">
        <div>
          <span>7,521,138,538</span>
          <span>平台总能量</span>
        </div>
        <div>
          <span>7,521,138,538</span>
          <span>平台总能量</span>
        </div>
        <div>
          <span>7,521,138,538</span>
          <span>平台总能量</span>
        </div>
      </div>
      <van-button>开始交易</van-button>
    </div>

    <div class="bottom">
      <div>
        <div style="font-size: 16px; color: #333333; text-align: center">
          市场介绍
        </div>
        <span
          style="
            font-size: 12px;
            color: #333333;
            width: 355px;
            display: block;
            margin: 0 10px;
          "
        >
          我们是波场生态中的能量自助租赁平台，我们的宗旨是为波场交易者降低能量消耗所需燃烧的费用，优惠力度更大，更安全且高效的能量自助租赁服务。
        </span>
      </div>
      <div class="box1">
        <hello-world
          v-for="(item, index) in List"
          :key="index"
          :title="item.title"
          :content="item.content"
          :imgSrc="item.url"
        />
      </div>
    </div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: { HelloWorld },
  data() {
    return {
      List: [
        {
          title: "经济",
          content: "秒到账，手续费直接降低88%。",
          url: require("../public/img/1.png"),
        },
        {
          title: "高效",
          content: "API&手工&转账&批量多种租赁方式。",
          url: require("../public/img/2.png"),
        },
        {
          title: "安全",
          content: "提供24小时专属客服服务。",
          url: require("../public/img/3.png"),
        },
      ],
      bannerList: [
        { url: require("../public/img/banner.png") },
        { url: require("../public/img/编组 2.png") },
        { url: require("../public/img/编组 4.png") },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 375px;
  height: 44px;
  padding: 0 10px;
  box-sizing: border-box;
  background-color: fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/deep/.van-swipe {
  img {
    display: block;
  }
}
.center-txt {
  width: 375px;
  height: 56px;
  background: #047eff;
  display: flex;
  justify-content: space-between;
  div {
    margin: auto;
    span {
      display: block;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: left;
      color: #fff;
    }
    span:nth-child(2) {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: left;
      color: #d8d8d8;
    }
  }
  div:nth-child(2) {
    border-left: #fff 1px solid;
    border-right: #fff 1px solid;
    padding: 0 10px;
  }
}
/deep/.van-button {
  width: 355px;
  height: 48px;
  background: #047eff;
  border-radius: 4px;
  box-shadow: 0px 4px 12px 0px rgba(4, 126, 255, 0.32);
  margin: 10px 10px 30px 10px;
  font-size: 18px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
}
.bottom {
  flex: 1;
  overflow-y: auto;
}
.box1 {
  margin: 10px 10px;
}
</style>
